<template>
  <!-- 热点内容部分 -->
    <div class="section_hotContent">

      <!-- 热点内容左侧部分 -->
      <div class="section_hotContent_left">
        <!-- 标题 -->
        <h2>
          热点内容&nbsp;&middot;&nbsp;&middot;&nbsp;&middot;&nbsp;&middot;&nbsp;&middot;&nbsp;&middot;
          <span>
            (&nbsp;
            <a href="#">更多</a>
            &nbsp;)
          </span>
        </h2>
        <!-- 图片列表 -->
        <div class="left_pictures">
            <ul>
              <li v-for="hotContent in hotContents" :key="hotContent.id">
                <div class="pic">
                  <img :src="hotContent.url" alt="">
                </div>
                <a href="#">{{hotContent.title}} </a>
                <span>{{hotContent.picNumber+'张图片'}}</span>
              </li>
            </ul>
        </div>
      </div>
      <!-- 热点内容中间部分 -->
      <div class="section_hotContent_center">
        <ul>
          <li class="special_center">
            <a href="#">故宫·千里江山丨会排队就够了？请收下这份血染的攻略</a>
            <div>木鼓鼓的日记</div>
            <p>故宫的年度大展“千里江山——历代青绿山水画特展”已经热火朝天的展出了一个多月...</p>
          </li>
          <li v-for="diary in hotDiaries" :key="diary.id">
            <a :href="diary.url">{{diary.title}}</a>
          </li>
        </ul>
      </div>
       <!-- 热点内容右侧部分 -->
      <div class="section_hotContent_right">
        <h2>
          热门话题&nbsp;&middot;&nbsp;&middot;&nbsp;&middot;&nbsp;&middot;&nbsp;&middot;&nbsp;&middot;
          ( &nbsp;
          <a href="#">去话题广场</a>
          &nbsp;)
        </h2>
        <div class="hotContent_talks">
          <ul>
            <li v-for="talk in hotTalks" :key="talk.id">
              <a :href="talk.url">{{talk.title}}</a><span v-if="talk.isNew">&nbsp;[新]</span>
              <div>{{talk.briefInfo}} · {{talk.participateNum}}人参与</div>
            </li>
          </ul>
        </div>
      </div>

    </div>
</template>

<script>
export default {
  data () {
    return {
      hotContents: [
        { id: '1', url: require('../../../assets/images/content/p2501864026.webp'), title: '「甲壳虫之墓」它们与世隔绝，直到有人踏入这片山谷', picNumber: '27' },
        { id: '2', url: require('../../../assets/images/content/p2501771830.webp'), title: '《雨天的火锅》', picNumber: '18' },
        { id: '3', url: require('../../../assets/images/content/p2502047708.webp'), title: '古老的埃及', picNumber: '68' },
        { id: '4', url: require('../../../assets/images/content/p2501793247.webp'), title: '台北-绿岛-垦丁', picNumber: '27' }
      ],
      hotDiaries: [
        { id: '1', title: '从人工智能到后人类：再度更新的AlphaGo没有改变什么？', url: '#' },
        { id: '2', title: '村官', url: '#' },
        { id: '3', title: '帮朋友装书架', url: '#' },
        { id: '4', title: '大家好，我是N017号童模', url: '#' },
        { id: '5', title: '柳林风声 插图对比', url: '#' },
        { id: '6', title: '对不起，我们最终还是没有变成超级英雄', url: '#' },
        { id: '7', title: '柳林风声 插图对比', url: '#' },
        { id: '8', title: '还记得那个横扫围棋界的AI“阿法狗”吗？现在，它输了……', url: '#' },
        { id: '9', title: '在冷门季节去北海道', url: '#' },
        { id: '10', title: '九州散策|熊本看城与熊记', url: '#' }
      ],
      hotTalks: [
        { id: '1', title: '人生中最尴尬的一件事', isNew: true, briefInfo: '说出来让大家高兴高兴', participateNum: '4274', url: '#' },
        { id: '2', title: '双十一什么值得买', isNew: false, briefInfo: '准备工作可以做起来了', participateNum: '9570', url: '#' },
        { id: '3', title: '我最喜爱的诺奖作家', isNew: true, briefInfo: '豆友心中有杆秤', participateNum: '3279', url: '#' },
        { id: '4', title: '网络流行语令我们更有趣了吗', isNew: false, briefInfo: '江山代有新词出，各领风骚数百天', participateNum: '2747', url: '#' },
        { id: '5', title: '秋日散步指南', isNew: false, briefInfo: '秋天散步才是正经事', participateNum: '4014', url: '#' },
        { id: '6', title: '秋食记', isNew: false, briefInfo: '天朗气清，烹一炉秋天', participateNum: '12023', url: '#' }
      ]
    }
  }
}
</script>

<style lang="scss">

.section_hotContent{
  height: 495px;
  width: 100%;
  position: relative;
  .section_hotContent_left{
    width: 360px;
    position: absolute;
    left: 208px;
    h2{
      color:  #072;
      font-size: 15px;
      line-height: 150%; /*设置行间的距离（行高） */
      margin: 0 0 10px 0;
    }
    span{
      font-size: 12px;
      color: #666666;
    }
    .left_pictures ul{
      list-style-type: none;
      display: inline-block;
      margin: 0px;
      padding: 0px;
      li{
        float: left;
        width: 170px;
        height: 230px;
        margin-right: 10px;
        font-size: 12px;
        .pic{
          width: 170px;
          height: 170px;
        }
        span{
          color:#999;
        }
      }
    }
  }
  .section_hotContent_center{
    position: absolute;
    left: 595px;
    width: 280px;
    ul{
      list-style-type: none;
      padding-left: 0;
      margin-top: 23px;
      li{
        font-size: 12px;
        line-height: 180%;
        margin-bottom: 10px;
      }
    }
    div{
      color:#999;
    }
    p{
      padding:0;
    }
  }
  .section_hotContent_right{
    position: absolute;
    width: 310px;
    left: 900px;
    h2{
      color: #072;
      font-size: 15px;
      line-height: 150%;
       margin: 0 0 10px 0;
       a{
         font-size: 12px;
       }
    }
    .hotContent_talks ul{
      list-style-type: none;
      padding: 0;
      margin-top: -10px;
      li{
        margin-bottom: 10px;
        a{
          font-size: 14px;
        }
        span{
          color:#4CC15F ;
          font-size: 14px;
        }
        div{
          color: #aaaaaa;
          font-size: 13px;
        }
      }
    }
  }
}
</style>
